<template>
    <div>
      <div id="swiperTop">
        <van-swipe :autoplay="3000" lazy-render>
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img :src="image.pic" alt=""/>
          </van-swipe-item>
        </van-swipe>
      </div>
      <HomeIcon/>
      <MusicList/>

      <p class="title">最新音乐</p>
      <SongItem v-for="(obj,index) in hotList" :key="index" :name="obj.name" :author="obj.song.artists[0].name"
                :id="obj.id" @click="updateIndex1(obj)"/>

    </div>
</template>

<script>
import MusicList from '@/views/Home/MusicList.vue';
import HomeIcon from '@/views/Home/HomeIcon.vue';
import SongItem from '@/components/SongItem.vue';
import {recommendMusicAPI, hotMusicAPI, getIMgAPI} from '@/api';
import {mapMutations} from 'vuex';

export default {

  components: {SongItem, HomeIcon, MusicList},
  data() {
    return {

      recommendList: [],
      hotList: [],
      images: [],
      item: [
        {
          al: {
            picUrl: '',
            id: '',
            name: '',
          }, ar: {
            name: '',
          },
        }],
    };
  },
  methods: {
    ...mapMutations(['updatePlayList', 'updatePlayListIndex', 'play']),
    updateIndex1(obj) {
      this.item.al.picUrl = obj.picUrl;
      this.item.al.id = obj.id;
      this.item.al.name = obj.name;
      this.item.ar.name = obj.song.artists[0].name;
      this.$store.commit('pushPlayList', this.item);
      this.$store.commit('updatePlayListIndex', this.$store.state.playList.length - 1);
      this.play();

    },
  },
  async created() {
    const songRes = await hotMusicAPI({limit: 10});
    this.hotList = songRes.data.result;
    console.log(this.hotList);
    const res = await recommendMusicAPI({limit: 6});
    this.recommendList = res.data.result;
    const imgRes = await getIMgAPI({type: 2});
    this.images = imgRes.data.banners;

  },

};
</script>
<style scoped lang="less">
.title {
    padding: 0.266667rem 0.24rem;
    margin: 0.24rem 0 0.24rem 0;
    background-color: #eee;
    color: #333;
    font-size: 15px;
}

#swiperTop {

    .van-swipe {
        width: 100%;
        height: 145.83px;

        .van-swipe-item {

            margin-bottom: 10px;

            img {
                width: 100%;
                border-radius: 0.2rem;
            }

            .van-swipe__indicator--active {}
        }
    }
}
</style>